<template>
    <div class="content">
        <van-row style="background-color: black; padding-top: 5px;">
            <van-col span="16">
                <div style="float: left; padding-left: 10px;">
                    <img src="../../assets/tb.png" alt="" width="40" height="40">
                </div>

                <!-- <van-swipe-cell>
                    <van-card desc="描述信息" title="商品标题" class="goods-card" :thumb="tbimg" />
                </van-swipe-cell> -->
                <div style="float: left; color: aliceblue; padding-left: 5px; font-weight: 800;">
                    <span>AI汽车汇</span><br>
                    <span style="font-size: 10px;">选车新车二手车</span>
                </div>

            </van-col>
            <!-- <van-col span="6">span: 6</van-col> -->
            <van-col span="8">
                <div style="float: left; padding-top: 10px; padding-right: 5px; padding-left: 15px;">
                    <van-icon name="search" color="#fff" size="20px" />
                </div>

                <div class="openAS">
                    <div style="margin-top: 5px; margin-left: 7px;">
                        打开APP<br>
                        数亿人的选择
                    </div>

                </div>
            </van-col>
        </van-row>
        <!--点击图标 要弹出框-->
        <van-icon name="bars" size="40px" @click="showPopup" />

        <van-tabs v-model:active="actives">
            <van-tab v-for="(item, index) in tabData" :title="item.title">
                <component :is="components[actives]"></component>

            </van-tab>
        </van-tabs>
        <!-- <div >
            <component :is="currentComponent"></component>
        </div> -->
        <!--需要一个弹出层-->
        <!-- 底部弹出 -->
        <van-popup v-model:show="showBottom" position="bottom" closeable close-icon="close" :style="{ height: '70%' }">
            <h4 style="text-align: center; padding-top: 20px;">全部频道</h4>
            <van-grid :column-num="3" :border="false" :gutter="10">
                <van-grid-item v-for="item in tabData" :key="item">
                    <van-button type="default" size="normal" @click='onClick(item.id)'>
                        {{ item.title }}
                    </van-button>
                </van-grid-item>
            </van-grid>
        </van-popup>

    </div>


    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">车友圈</van-tabbar-item>
        <van-tabbar-item icon="friends-o">选车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">二手车</van-tabbar-item>
        <van-tabbar-item icon="setting-o">服务</van-tabbar-item>
    </van-tabbar>

</template>

<script setup>
import tbimg from '../../assets/tb.png'
import { computed, ref } from 'vue';
import LookMove from '../../components/movetab/LookMove.vue';
import NewCar from '../../components/movetab/NewCar.vue';
import Selected from '../../components/movetab/Selected.vue';
const active = ref(0);
const actives = ref(0);
//定义循环内容
const tabData = ref([
    { id: 1, title: '精选' },
    { id: 2, title: '导购' },
    { id: 3, title: '新车' },
    { id: 4, title: '原创' },
    { id: 5, title: '行业' },
    { id: 6, title: '视频看车' },
])


// 先存储定义数组
const components = ref([Selected,LookMove, NewCar])
//计算属性 
const currentComponent = computed(() => { 
    return components.value[actives.value] 
})
// 弹出层
const showBottom = ref(false);

const showPopup = () => { 
    showBottom.value = true
}
const onClick = (id) => { 
    actives.value = id - 1;
    showBottom.value = false;
}
</script>

<style scoped>
.openAS{
    width: 80px;
    height: 40px;
    border-radius: 10px;
    background-color: #fbd83f;
    float: left;
    font-size: 12px;
}
.van-button{
    background-color: #e8e5e5;
    border: none;
   width: 105px;
}
.van-icon{
    background-color: white;
    float: right;
    margin-top: 0px;
}
</style>